<template>
  <div class="input-demo">
    <section class="section">
      <label class="label">基本用法</label>
      <zui-input round placeholder="输入文本" clearable showWordLimit autoFocus />
    </section>
    <section class="section">
      <h1 class="label">设置宽度</h1>
      <zui-input round placeholder="输入文本" style="width: 100px" />
    </section>
    <section class="section">
      <h1 class="label">大小</h1>
      <zui-input round placeholder="输入文本" size="large" showWordLimit maxWordLength="10" />
      <zui-input round placeholder="输入文本" size="small" showWordLimit style="margin-top: 8px" />
    </section>
    <section class="section">
      <h1 class="label">Disabled</h1>
      <zui-input round placeholder="输入文本" size="large" disabled modelValue="演示文字" />
    </section>

    <section class="section">
      <h1 class="label">Multiline</h1>
      <zui-input round placeholder="输入文本" size="large" multiline showWordLimit modelValue="演示文字" />
    </section>

    <section class="section">
      <h1 class="label">AutoHeight</h1>
      <zui-input round placeholder="输入文本" size="large" multiline showWordLimit autoHeight modelValue="演示文字" />
    </section>
    <section class="section">
      <h1 class="label">Readonly</h1>
      <zui-input round placeholder="输入文本" size="large" readonly modelValue="演示文字" />
    </section>
    <section class="section">
      <h1 class="label">Preview</h1>
      <zui-input round placeholder="输入文本" size="large" preview modelValue="演示文字" />
    </section>
    <section class="section">
      <h1 class="label">Preview empty</h1>
      <zui-input round placeholder="输入文本" size="large" preview />
    </section>

    <section class="section">
      <h1 class="label">隐藏border</h1>
      <zui-input round placeholder="普通" hide-border />
    </section>

    <section class="section">
      <h1 class="label">密码</h1>
      <zui-input round placeholder="密码" show-eye type="password" clearable showWordLimit />
      <zui-input round placeholder="密码" show-eye type="password" style="height: 40px" clearable />
    </section>

    <section class="section">
      <h1 class="label">Blur 事件</h1>
      <zui-input round placeholder="普通" @blur="Toast('普通 blur')" />
      <zui-input round placeholder="自动换行" @blur="Toast('自动换行 blur')" autoHeight style="margin-top: 8px" />
      <zui-input round placeholder="多行" @blur="Toast('多行 blur')" multiline style="margin-top: 8px" />

      <zui-input round placeholder="多行5行" @blur="Toast('多行 blur')" multiline :lines="5" style="margin-top: 8px" />
    </section>

    <section class="section">
      <h1 class="label">内边距</h1>
      <zui-input round placeholder="内边距" padding="0" hide-border showWordLimit clearable />

      <zui-input round placeholder="内边距多行" multiline padding="0" hide-border showWordLimit />
    </section>
  </div>
</template>

<script setup>
import { Toast } from 'vant'
</script>

<style lang="scss" scoped>
.input-demo {
  .section {
    background-color: #ffffff;
    padding: 12px 20px;
    margin-top: 8px;

    .label {
      line-height: 32px;
      font-weight: bold;
    }
  }
}
</style>
